
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Start demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <style type="text/css">
    html {
  touch-action:none;
  content-zooming:none;
}
body {
  position:absolute;
  margin:0;
  padding:0;
  background:#333;
  width:100%;
  height:100%;
  overflow: hidden;
}
#scene{
  margin-top: 300px;
  text-align: center;
}
#scene .particle {
  position: absolute;
  transform-origin:50% 50%;
  -webkit-transform-origin:50% 50%;
}
  </style>
</head>
<body>
  <div id="scene">
    <img src="../img/sphere_moy_v3.png" data-transform="translateX(-5px) translateY(-20px) translateZ(80px)" id="particle" style="display: none;">
  </div>

  <script type="text/javascript">
    var particleNum=100;
    var particles = [];
      function Particle (img, x, y, life) {
    this.img = document.createElement('img');
    this.img.className = "particle";
    this.img.src = img.src;
    document.getElementById("scene").appendChild(this.img);
    this.img.style.visibility = "visible";
    this.maxLife = life;
    this.life =  life;
    this.size = 1;
    this.opacity = 1;
    this.pos = {x: x, y: y};
    this.vel = {x: 0, y: 0};
    this.ini = {x: x, y: y};
  }
  Particle.prototype.anim = function () {
    this.life -= 1;
    this.pos.x  += (this.vel.x += (Math.random() - 0.5) * 1 );
    this.pos.y  += (this.vel.y += (Math.random() - 0.5) * 1.5 );
    this.size += (Math.random() * 0.01);
    this.opacity = this.life / this.maxLife;
    if (this.life < 0) {
      // this.pos.x = this.ini.x;
      // this.pos.y = this.ini.y;
      // this.life =  this.maxLife;
      // this.vel.x = 0;
      // this.vel.y = 0;
      // this.size = 1;
      // this.opacity = 1;
    }
  }
  var particle = document.getElementById("particle");
  for (var i = 0; i < particleNum; i++) {
    particles.push(
      new Particle(particle, -5, -20, 150)
    );
  }
  function run(){
    requestAnimationFrame(run); 
    for (var i = 0; i < particleNum; i++) {
      var part = particles[i];
      part.anim();
      var s = "scale("+(part.size)+") translate(" + (part.pos.x) + "px," + (part.pos.y) + "px)";
      var op = part.opacity;
      part.img.style.opacity = op;
      part.img.style.transform = s;
      part.img.style.webkitTransform = s;
    }
  }
  requestAnimationFrame(run);
  </script>
</body>
</html>
